<template>
  <view>
    <view class="" :style="'background-color: black;display: flex;'+'height:'+top1+'px;'">


      <view class="" :style=" 'padding-top:'+ center+'px;padding-left:3px'  ">
        <slot name="icons">
          <!--  <uni-icons color="white" type="left" size="20"> </uni-icons> -->
        </slot>

      </view>

      <view class="" :style="'height:'+top1+'px;padding-left:'+(wid-widthdata+(widthdata/4-10))+'px;'
      +'padding-top:'+ center+'px;'
      ">
        <slot name="title">
          <!-- <span style="color: white;">提交订单</span> -->
        </slot>

      </view>


    </view>
  </view>
</template>

<script>
  export default {
    name: "my-navbar",
    props: {
      widthdata: {
        type: String,
        default: ''
      }
    },
    data() {
      return {

        top1: 0,
        center: 0,
        wid: 0,
      };
    },
    created() {
      //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
      const ss = uni.getDeviceInfo()
      //  console.log(ss, "ss")
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // console.log(menuButtonInfo, "menuButtonInfo")
      this.center = menuButtonInfo.top + (menuButtonInfo.height) / 2 - 10 //胶囊的中心点,8是字体的大小
      const systemInfo = uni.getWindowInfo()
      //获取设备宽度的一半

      this.wid = systemInfo.windowWidth / 2
      this.top1 = systemInfo.statusBarHeight + (ss.system.indexOf('iOS') > -1 ? 44 : 48)


    },


    methods: {

    }
  }
</script>

<style lang="scss">

</style>